<template>
  <div class="p-2">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="130px">
      <el-form-item label="模板风格" prop="type">
        <el-radio-group v-model="formData.type">
          <el-radio v-for="item in types" :key="item.value" :value="item.value" border>{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="顶部图片" prop="topImg">
        <el-space direction="vertical" alignment="start" :size="4">
          <JqtOssLibrary v-model="formData.topImg" :limit="1" :isObject="false" />
          <el-text type="info" size="small">建议尺寸：750*高不限</el-text>
        </el-space>
      </el-form-item>
      <el-form-item label="悬浮卡片" prop="floatCard.switchValue">
        <el-switch v-model="formData.floatCard.switchValue" active-value="1"  inactive-value="0" />
      </el-form-item>
      <div v-if="formData.floatCard.switchValue === '1'" class="noteBj">
        <el-form-item label="悬浮头像" prop="floatCard.picture">
          <JqtOssLibrary v-model="formData.floatCard.picture" :data="formData.floatCard.picture" :limit="1" :isObject="false" />
        </el-form-item>
        <el-form-item label="悬浮标题" prop="floatCard.title">
          <el-input v-model="formData.floatCard.title" placeholder="请输入悬浮标题" />
        </el-form-item>
        <el-form-item label="悬浮标签" prop="floatCard.labels">
          <JqtInputTag v-model="formData.floatCard.labels" :max="3" placeholder="请输入悬浮标签"/>
        </el-form-item>
      </div>
      <el-form-item label="头部卡片" prop="headCard.switchValue">
        <el-switch v-model="formData.headCard.switchValue" active-value="1"  inactive-value="0" />
      </el-form-item>
      <div v-if="formData.headCard.switchValue === '1'" class="noteBj">
        <el-form-item label="卡片头像" prop="headCard.picture">
          <JqtOssLibrary v-model="formData.headCard.picture" :data="formData.headCard.picture" :limit="1" :isObject="false" />
        </el-form-item>
        <el-form-item label="卡片标题" prop="headCard.title">
          <el-input v-model="formData.headCard.title" placeholder="请输入悬浮标题" />
        </el-form-item>
        <el-form-item label="卡片副标题" prop="headCard.subtitle">
          <el-input v-model="formData.headCard.subtitle" placeholder="请输入悬浮标题" />
        </el-form-item>
        <el-form-item label="卡片标签" prop="headCard.labels">
          <JqtInputTag v-model="formData.headCard.labels" :max="3" placeholder="请输入卡片标签"/>
        </el-form-item>
      </div>

      <el-form-item label="客服名称" prop="customer.switchValue">
        <el-switch v-model="formData.customer.switchValue" active-value="1"  inactive-value="0" />
      </el-form-item>
      <div v-if="formData.customer.switchValue === '1'" class="noteBj">
        <el-form-item label="客服名称" prop="customer.name">
          <el-input v-model="formData.customer.name" placeholder="请输入客服名称" />
        </el-form-item>
      </div>

      <el-form-item label="客服头像" prop="customerPicture">
        <JqtOssLibrary v-model="formData.customerPicture" :data="formData.customerPicture" :limit="1" :isObject="false" />
      </el-form-item>
      <el-form-item label="游客头像" prop="touristPicture">
        <JqtOssLibrary v-model="formData.touristPicture" :data="formData.touristPicture" :limit="1" :isObject="false" />
      </el-form-item>
      <el-form-item label="流程标题" prop="processTitle">
        <el-input v-model="formData.processTitle" placeholder="请输入流程标题" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">

import JqtOssLibrary from '@/components/JqtOssLibrary/index.vue';
import JqtInputTag from '@/components/JqtInputTag/index.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_normal_disable,bus_spread_link_page_mode } = toRefs<any>(proxy?.useDict('sys_normal_disable','bus_spread_link_page_mode'));

const formRef = ref<ElFormInstance>();
export interface DialogModeVo {
  //风格类型 0.模板一(问答跟随) 1.模板二(问答悬浮) 2.模板三(内容跟随+按钮在底部) 3.模板四(内容+按钮跟随)
  type?: string;
  //顶部图片
  topImg?: string;
  //悬浮卡片(页面最顶端)
  floatCard?: {
    //悬浮卡片开关 0.关闭 1.开启
    switchValue:string;
    //悬浮卡片图片
    picture:string;
    //悬浮卡片标题
    title: string;
    //悬浮卡片标签多个以,号分割
    labels:string;
  };
  //头部卡片
  headCard?: {
    //头部卡片开关 0.关闭 1.开启
    switchValue:string;
    //头部卡片图片
    picture:string;
    //头部卡片标题
    title: string;
    //头部卡片副标题
    subtitle:string;
    //头部卡片标签多个以,号分割
    labels:string;
  };
  //客服名称
  customer?: {
    //客服名称开关 0.关闭 1.开启
    switchValue:string;
    //名称
    name: string;
  };
  //客服头像
  customerPicture?: string;
  //游客头像
  touristPicture?: string;
  //流程标题
  processTitle?: string;

}
const formData = reactive<DialogModeVo>({
  type: '0',
  topImg: undefined,
  floatCard: {
    switchValue: '0',
    picture: undefined,
    title: undefined,
    labels: undefined,
  },
  headCard: {
    switchValue: '0',
    picture: undefined,
    title: undefined,
    subtitle: undefined,
    labels: undefined,
  },
  customer: {
    switchValue: '0',
    name:undefined,
  },
  customerPicture: undefined,
  touristPicture: undefined,
  processTitle: undefined,
});

const rules = {
  type: [{ required: true, message: '请选择模板风格', trigger: 'change' }],
  // 悬浮卡片 - 条件必填
  'floatCard.title': [{ required: true, message: '请输入悬浮标题', trigger: 'change' }],
  'floatCard.picture': [{ required: true, message: '请上传悬浮头像', trigger: 'change' }],

  // 头部卡片 - 条件必填
  'headCard.title': [{ required: true, message: '请输入卡片标题', trigger: 'change' }],
  'headCard.picture': [{ required: true, message: '请上传卡片头像', trigger: 'change' }]
};
// 创建风格类型数组
const types = [
  { value: '0', label: '模板一(问答跟随)' },
  { value: '1', label: '模板二(问答悬浮)' },
  { value: '2', label: '模板三(内容跟随+按钮在底部)' },
  { value: '3', label: '模板四(内容+按钮跟随)' }
];


const props = defineProps({
  modelValue: Object,
});

onMounted(() => {
// 在初始化时设置 formData
  Object.assign(formData, props.modelValue);
});

const emit = defineEmits(['update:modelValue','confirmCallBack']);
watch(formData, (newVal, oldVal) => {
  emit('update:modelValue', newVal);
  emit('confirmCallBack', newVal);
}, { deep: true, immediate: true });

watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    Object.assign(formData, newVal);
  }
}, { deep: true, immediate: true });


const validateForm = () => {
  return new Promise((resolve, reject) => {
    if (!formRef.value) {
      reject(new Error('表单引用不存在'));
      return;
    }
    formRef.value.validate(valid => {
      if (valid) {
        resolve(true);
      } else {
        reject(new Error('问答表单填写不完整'));
      }
    });
  });
};

defineExpose({
  validateForm,
});
</script>

<style scoped>
.noteBj {
  background: #F7F7F7;
  padding: 20px;
  margin-bottom: 20px;
}
</style>
